<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			.cetner_type{ background-color:#fff; position: relative; height: 0.80rem;}
			.cetner_type a{ float: left; width: 20%; text-align: center; font-size: 0.28rem; color: #666; line-height: 0.80rem; height: 0.80rem; overflow: hidden;}
			.cetner_type a i{ display:inline-block; vertical-align: top; box-sizing: border-box; height: 0.80rem; border-bottom: 0.05rem #fff solid;}
			.cetner_type a.on{ color:#3262F1;}
			.cetner_type a.on i{ border-color:#3262F1;}
			
			.order_tab{ height: 50px; background-color: #fff; overflow: hidden;}
			.order_tab a{ float:left; position: relative; width: 33.33%; text-align: center; font-size: 14px; font-weight:500; color: #9F9F9F; line-height: 45px;}
			.order_tab a.on{ color:#3262F1; background-color: transparent;}
			.order_tab a.on::after{ position:absolute; content: ""; left: 50%; margin-left: -10px; bottom: 0; width: 20px; border-bottom: 2px #3262F1 solid;}

			
		</style>
	</head>
	<body>
		<header class="header" id="header" style="height:90px;">
			<ul class="wrapper header_01">
				<a href="javascript:;" tapmode onclick="closeWin();" class="btn back"></a>
				<div class="h_tab" id="toptablist">
					<a href="javascript:;" tapmode onclick="changetoptab(0);" class="on">我的接单</a>
					<a href="javascript:;" tapmode onclick="changetoptab(1);">我发布的</a>
				</div>
			</ul>
			<div class="order_tab" id="tablist">
				<a href="javascript:;" tapmode onclick="changetab(0);" class="on">进行中</a>
				<a href="javascript:;" tapmode onclick="changetab(1);">待确认</a>
				<a href="javascript:;" tapmode onclick="changetab(2);">已完成</a>
			</div>
		</header>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript">
		var billFrames = ["billgroupreceive"];
		var currentbillFrameName = 'billgroupreceive';
		var headerH;
		var groupindexreceive = 0, groupindexsend = 0;
		var aTabList,curIndex = 0;
		apiready = function() {
			api.parseTapmode();
			var header = $api.byId('header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			var body_h = $api.offset($api.dom('body')).h;
			headerH = headerPos.h;
			
			aTabList = document.getElementById("tablist").children;
			
			api.openFrameGroup({
				name: 'billgroupreceive',
				bounces: false,
				rect: {
					x: 0,
					y: headerPos.h,
					w: 'auto',
					h: 'auto'
				},
				frames: [{
					name: 'billlistreceive1_frm',
					url: 'billlist_frm.html',
					bgColor: '#fff',
					pageParam: {
						status: 1,
						billtype: 'receive'
					}
				}, {
					name: 'billlistreceive2_frm',
					url: 'billlist_frm.html',
					bgColor: '#fff',
					pageParam: {
						status: 2,
						billtype: 'receive'
					}
				}, {
					name: 'billlistreceive3_frm',
					url: 'billlist_frm.html',
					bgColor: '#fff',
					pageParam: {
						status: 3,
						billtype: 'receive'
					}
				}]
			}, function(ret, err) {
				curIndex = ret.index;
				groupindexreceive = curIndex;

				changeIndex(curIndex);
			});
			
		}
		function changetoptab(index)
		{
			var liList = document.getElementById("toptablist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i], 'on');
			}
			
			$api.addCls(liList[index],'on');
			
			var liList = document.getElementById("tablist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i], 'on');
			}
			if(index == 0) {
				$api.addCls(liList[groupindexreceive],'on');
			}
			else
			{
				$api.addCls(liList[groupindexsend],'on');
			}
			
			showBillFrame(index);
			
		}
		function openframegroup(framegroupname) {
			api.openFrameGroup({
				name: framegroupname,
				bounces: false,
				rect: {
					x: 0,
					y: headerH,
					w: 'auto',
					h: 'auto'
				},
				frames: [{
					name: 'billlistsend1_frm',
					url: 'billlist_frm.html',
					bgColor: '#fff',
					pageParam: {
						status: 1,
						billtype: 'send'
					}
				}, {
					name: 'billlistsend2_frm',
					url: 'billlist_frm.html',
					bgColor: '#fff',
					pageParam: {
						status: 2,
						billtype: 'send'
					}
				}, {
					name: 'billlistsend3_frm',
					url: 'billlist_frm.html',
					bgColor: '#fff',
					pageParam: {
						status: 3,
						billtype: 'send'
					}
				}]
			}, function(ret, err) {
				curIndex = ret.index;
				groupindexsend = curIndex;
				changeIndex(curIndex);
			});
		}
		function showBillFrame(index) {
			if(index == 0)
			{
				currentbillFrameName = 'billgroupreceive';
			}
			else
			{
				currentbillFrameName = 'billgroupsend';
			}
			currentbillFrameName = currentbillFrameName.trim();
			if (billFrames.indexOf(currentbillFrameName) == -1) {
				openframegroup(currentbillFrameName); 
				billFrames.push(currentbillFrameName);
			}
			// 隐藏所有
			hideAllFrame(currentbillFrameName);

		}
		// 隐藏所有的frame
		function hideAllFrame(frameName) {
			for(var h in billFrames){
				var curframe = billFrames[h];
				console.log(curframe+'?');
				if (frameName != curframe) {
					
					api.setFrameGroupAttr({
						name: curframe,
						hidden: true
					});
				} else {
					api.setFrameGroupAttr({
						name: curframe,
						hidden: false
					});
				}
			}
		}
		var changeIndex = function(idx){
			//if (idx == curIndex) return;
			curIndex = idx;
			for (var i = 0; i < aTabList.length; i++) {
					if (i == idx) {
					$api.addCls(aTabList[idx],'on');
					} else{
					$api.removeCls(aTabList[i],'on');
					}
			}

		}
		function changetab(idx)
		{
			if (idx == curIndex) return;
			curIndex = idx;
			for (var i = 0; i < aTabList.length; i++) {
				if (i == idx) {
					$api.addCls(aTabList[idx],'on');
				} else{
					$api.removeCls(aTabList[i],'on');
				}
			}
			api.setFrameGroupIndex({
				name: currentbillFrameName,
				index: idx,
				scroll: true
			});
		}
		function closeWin(){
			api.closeWin({
			});
		}
	</script>
</html>
